<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="旅游景区" title-size="36" height="50" :border-bottom="false">
          <view class="slot-wrap">
            <view style="width: 690rpx; overflow: auto">
              <view class="location dis-flex flex-y-center" @click="onCity">
                <u-icon
                  class="cate-icon"
                  style=""
                  name="/static/dw-g.png"
                  size="30rpx"
                  mode=""
                ></u-icon>
                <text class="address u-line-1">{{
                  city ? city.substr(0, 4) + '...' : '' || '选择'
                }}</text>
                <u-icon
                  style="margin-left: 10rpx"
                  name="arrow-down"
                  color="#333333"
                  size="26"
                ></u-icon>
              </view>
            </view>
          </view>
        </u-navbar>
        <view class="searchView" @click="onSearch">
          <u-search
            placeholder="景点"
            height="80"
            :show-action="false"
            style="width: 100%"
          ></u-search>
        </view>
      </view>
      <view class="travel-list">
        <view
          class="travel-item dis-flex flex-y-center"
          @click="routeTo('/travel/detail')"
          v-for="(item, index) in itemList"
          :key="index"
        >
          <u-image
            border-radius="8"
            :src="item.picUrl"
            mode=""
            width="160rpx"
            height="160rpx"
          ></u-image>
          <view class="item-con">
            <view class="name">景区名称景区名称景区名称</view>
            <view class="label">5A</view>
            <view class="des">贵阳市花溪区 <text style="margin-left: 40rpx">距你3.8km</text></view>
            <view class="price"
              >门票 <text class="red num">¥20</text><text class="red">起</text></view
            >
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
      itemList: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      city: '',
      imgStyle: {
        width: '12rem'
      }
    }
  },
  onLoad() {
    // this.queryList()
  },
  methods: {
    onCity() {
      uni.$on('selectAddress', (res) => {
        this.cityCode = res.code
        this.city = res.name
        this.queryList()
        uni.$off('selectAddress')
      })
      uni.navigateTo({
        url: '/other/select-city/select-city'
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },

    queryList(pageNo = 1, pageSize = 10) {
      // this.$u.api.getStoreList({
      // 	pageNo,
      // 	pageSize,
      // 	cityCode: this.cityCode,
      // 	recommend:1
      // 	// categoryId: categoryId
      // }).then(res => {
      // 	//this.itemList[this.current] = res.data.list
      // 	this.$refs.paging.complete(res.data.list)
      // })
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background-color: #f0f0f0;
}

.cate-icon {
  vertical-align: middle;
  margin-right: 10rpx;
}

.address {
  font-size: 30rpx;
}

.searchView {
  padding: 13rpx 20rpx;
  background-color: #fff;
}

.card {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}

.travel-list {
  padding: 20rpx;
  .travel-item {
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 20rpx;
    .item-con {
      height: 160rpx;
      display: flex;
      justify-content: space-between;
      flex-flow: column;
      margin-left: 20rpx;
      .name {
        font-weight: 600;
        font-size: 28rpx;
      }
      .label {
        width: 56rpx;
        height: 32rpx;
        background: #d7f5f1;
        border-radius: 6rpx;
        font-size: 22rpx;
        color: #10a28f;
        text-align: center;
        line-height: 32rpx;
      }
      .des {
        font-size: 24rpx;
        color: #666666;
      }
      .price {
        font-size: 24rpx;
      }
      .red {
        color: #fa453c;
      }
      .num {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}
</style>
